<template>
	<div class="titles"> 我的 </div>
	<div class="content ">
		<van-row>
		  <van-col span="8">
			  <van-image
			    round
			    width="4rem"
			    height="4rem"
			    :src="userinfo.avator"
			  />
		  </van-col>
		  <van-col span="16">
			  <div class="member-detail">
			  	<p class="nickname">{{userinfo.username}}</p>
			  	<p class="info">{{userinfo.intro}}</p>
			  </div>
		  </van-col>
		</van-row>

		<van-cell-group>
		  <van-cell title="账号管理" is-link to="/admin"></van-cell>
		</van-cell-group>

		<van-cell-group>
		  <van-cell title="个人资料" is-link to="/data"></van-cell>
		  <van-cell title="我的爱车" is-link to="/mycar"></van-cell>
		</van-cell-group>
		
		<van-cell-group>
		  <van-cell title="版本号" value="V 0.0.0" />
		  <van-cell title="关于" is-link to="/about"></van-cell>
		</van-cell-group>
	</div>
	
	 <div style="margin: 16px;" >
	    <van-button round block type="primary" native-type="submit" :to="{'name':'login'}">
	      退出登录
	    </van-button>
	  </div>
	
	
</template>

<script lang="ts" setup>
	import {onMounted, reactive} from 'vue';
	import {getUserInfo} from '@/api/user.ts'
	
	const badge_numbers = reactive({
		"wait_pay": 2,
		"wait_send": 4,
		"wait_receive":5
	})
	const userinfo = reactive({
		"username":"昵称",
		"intro": "这里是用户的介绍信息",
		"avator": "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
	})
	
	
	onMounted(()=>{
		changeGuidActive()
		console.log("this is on mounted") 
		getData()
	})
	const $emit = defineEmits(['change'])
		const changeGuidActive = () => {
			console.log("change",4)
			$emit("change",4)
		}
	
	const getData = () => {
		// 获取用户id或用户名（id存在本地）
		const id = 1
		getUserInfo(id)
		.then(res => {
			console.log('getUserInfo',res)
			if(res.code != 0){
				console.log(`获取数据失败，`+res.message)
			}else{
				userinfo.username = res.data.username
				userinfo.intro = res.data.intro
				console.log("获取数据成功")
			}
		})
		.catch(err => {
			console.log(err,`服务端错误！`)
		})
	};
	
</script>

<style>
	.content {
		background-color: #f7f8fa;
		height: 500px;
		padding: 20px 10px;
	}
	
	.member-detail{
		font-size: 14px;
	}
	
	
</style>